import React, { useState } from 'react';
import GopherProps from '../objects/internal/GopherProps';
import { MapPoint } from '../pouch/models/City';
import './CityManagementFragment.css';
import { Button, Card, Input, message, Popconfirm, Space } from 'antd';
import AsyncCitySelector from '../components/AsyncCitySelector';
import { useTranslation } from 'react-i18next';
import CityMap from '../components/CityMap';
import { APILoader } from '@uiw/react-baidu-map';

export default function CityManagementFragment(props: GopherProps) {
	const {t} = useTranslation();

	const [polygon, setPolygon] = useState<MapPoint[]>([]);
	const [contour, setContour] = useState<MapPoint[]>([]);
	const [loading, setLoading] = useState(false);
	const [committing, setCommitting] = useState(false);
	const [city, setCity] = useState('');
	const [reloadPrompt, setReloadPrompt] = useState(0);

	const [isCreatingNew, setCreatingNew] = useState(false);
	const [isEditing, setEditing] = useState(false);

	const loadCityContour = () => {
		setLoading(true);
		props.gopher.getCity(city).then(result => {
			console.log('loading contour');
			if (result) {
				setPolygon(result.region);
				console.log(`contour loaded (${result.region.length} points)`);
			}
			setLoading(false);
		});
	};

	const editCityContour = () => {
		setEditing(true);
		setContour(polygon);
	};

	const createCityContour = () => {
		setCreatingNew(true);
		setContour([]);
		setPolygon([]);
		setCity('');
	};

	const commitCityContour = () => {
		if (contour.length < 3) {
			message.info(t('popup-too-few-points'));
		} else {
			setCommitting(true);
			let promise;
			if (isEditing) {
				// edit existing contour
				promise = props.gopher.updateContour(city, contour);
			} else {
				// create new contour
				promise = props.gopher.addCity(city, contour);
			}
			promise.then(() => {
				setEditing(false);
				setCreatingNew(false);
				setCommitting(false);
				message.success(t('popup-success'));
				setReloadPrompt(Math.random());
			});
		}
	};

	const cancelEdit = () => {
		setCreatingNew(false);
		setEditing(false);
		setContour(polygon);
	};

	const deleteCity = () => {
		setCommitting(true);
		props.gopher.deleteCity(city).then(() => {
			setCommitting(false);
			message.success(t('popup-success'));
			setReloadPrompt(Math.random());
		});
	};

	return (
		<div className={'bike-map-wrapper'}>
			<div className={'bike-map-filter'}>
				<Card>
					<Space>
						<AsyncCitySelector disabled={isCreatingNew} onChange={x => setCity(x)} gopher={props.gopher} promptReload={reloadPrompt} />
						<Button loading={loading || committing} disabled={isEditing || isCreatingNew} type={'primary'} onClick={loadCityContour}>{t('button-city-load')}</Button>
						<Button loading={loading || committing} disabled={isCreatingNew} onClick={editCityContour}>{t('button-city-edit')}</Button>
						<Popconfirm title={t('dialog-delete-confirm')} onConfirm={deleteCity}>
							<Button loading={loading || committing} disabled={isEditing || isCreatingNew} type={'primary'} danger>{t('button-city-delete')}</Button>
						</Popconfirm>
						<Button disabled={isEditing || isCreatingNew} onClick={createCityContour}>{t('button-city-new')}</Button>
						<Input disabled={!isCreatingNew} placeholder={t('tip-create-city-contour')} onChange={x => setCity(x.target.value)} />
						<Button disabled={!isCreatingNew && !isEditing} loading={committing} onClick={commitCityContour}>{t('button-city-commit')}</Button>
						<Button disabled={!isCreatingNew && !isEditing} onClick={cancelEdit}>{t('button-city-cancel')}</Button>
					</Space>
				</Card>
			</div>
			<div className={'bike-map-map'}>
				<APILoader akay={'LUGDprgmonNtCqbllRnpGs9Cn7Z4b7H6'}>
					<CityMap polygon={polygon} allowCreation={isCreatingNew} allowEdit={isEditing || isCreatingNew} onContourUpdate={setContour} />
				</APILoader>
			</div>
		</div>
	);
}
